<template>
	<view class="mycard" :style="{ 'background-color': bg }">
		<view class="mycardTitle">{{ title }}</view>
	</view>
</template>

<script>
export default {
	name: 'my-card',
	props: {
		title: {
			type: String,
			value: null
		},
		bg: {
			type: String,
			value: '#00aaff'
		}
	},
	data() {
		return {};
	}
};
</script>

<style>
.mycard {
	/* android和ios基本是webKit内核的浏览器，对于webkit的属性必须重视 */
	display: -webkit-flex;
	display: flex;
	flex-flow: row | wrap;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	margin: 20rpx;
	border-radius: 20rpx;
	padding: 20rpx;
	color: #000000;
	
}
.mycardTitle {
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
</style>
